/* scaffolding */
:root {
    font-family: sans-serif;
}

/* layout */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #aaa;
}


body {
    display: flex;
    flex-direction: column;
}

#middle {
    flex-shrink: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#input {
    flex-grow: 1;
}

#schematic {
    border-top: 1px solid #aaa;
    background: #222;
    flex-grow: 1;
}
#schematic.compiling {
    opacity: 0.7;
}

#output {
    display: flex;
    flex-direction: column;
    background: #111;
    position:relative;
    overflow: hidden;
}

#terminal-box {
    flex-shrink: 0;
}
#schematic.d-none + #terminal-box {
    flex-grow: 1;
}

@media screen {
    #middle {
        flex-direction: row;
    }
    #schematic {
        border-top: none;
        width: 100vw;
    }
    #terminal-box,
    #properties {
        width: 100vw;
    }
}

/* textarea */

#input {
    font-family: monospace;
    font-size: 14px;
    -moz-tab-size: 4;
    tab-size: 4;
    border: none;
    padding: 7px;
    resize: none;
}
